<template>
	<view class="main-page">
		<view class="top-container">
			<view class="row-container-row-between width-100p">
				<text class="font-333-32">提现账户</text>
				<view class="row-container">
					<image class="account-ic" src="../../static/ic_share_wechat.png"></image>
					<text class="font-333-32">微信零钱</text>
				</view>
			</view>
			<view class="row-divider"></view>
			<text class="font-333-32">提现金额</text>
			<view class="row-container mt-20">
				<text class="font-333-44 font-weight-600 mr-6">¥</text>
				<input 
					v-model="money"
					class="font-333-72 font-weight-600 width-100p"
					style="height: 80rpx;"
					type="digit"
				/>
			</view>
			<view class="row-container mt-20">
				<text class="font-999-26">当前账户余额{{amount}}元，</text>
				<text class="font-333-26" @click="clickAll">全部提现</text>
			</view>
			<view class="rule-container">
				<text class="font-333-32 font-weight-600">***提现说明</text>
				<text class="font-333-28 mt-16">1、单笔提现最低额度{{minWithdrawAmount}}元，最高额度{{maxWithdrawAmount}}元</text>
				<text class="font-333-28 mt-10">2、单日最多提现{{maxWithdrawCount}}次</text>
				<text class="font-333-28 mt-10">3、目前只支持提现到微信零钱</text>
				<text class="font-333-28 mt-10">4、审核时间为每日16:00</text>
			</view>
			<text class="confirm-btn" @click="confirmWithdraw">确认提现</text>
		</view>
		
		<view class="record-container">
			<text class="font-333-32 font-weight-600 mb-20">提现记录</text>
			<view class="record-item" v-for="(item , index) in recordList" :key="index">
				<view class="record-divider"></view>
				<view class="row-container">
					<!-- <text class="font-333-26">2021-12-24 22:11</text> -->
					<text class="font-333-26">{{item.createTime}}</text>
					<text class="font-333-26 font-weight-600 ml-60">¥{{item.amount}}</text>
				</view>
				
				<view class="row-container-end">
					<view class="play-ad" @click="handlePlayAd(item)"
					v-if="item.status == 0 && item.checkSpeedOpen == 1">
						<image class="wh-24 mr-8" src="../../static/ic_play_ad.png"></image>
						<text class="font-333-24 font-weight-600">看广告秒审</text>
					</view>
					<text class="font-ff621f-26 font-weight-600" v-if="item.status == 0">审核中</text>
					<text class="font-333-26" v-if="item.status == 1">已到账</text>
					<text class="font-f23030-26 font-weight-600" v-if="item.status == 2">审核失败</text>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:'',
				amount:'0' , // 当前余额
				maxWithdrawAmount:'' , //最大提现金额
				maxWithdrawCount:'' , //最大提现次数
				minWithdrawAmount:'' , //最小提现金额
				recordList:[],
				page:1,
				hasMoreData:false,
				videoAd:null,
				adWithdrawId:''
			}
		},
		
		onReady() {
			this.initVideoAd()
		},	
		
		onLoad() {
			this.loadUserDetail()
			this.loadLogList()
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadLogList()
			this.loadUserDetail()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadLogList()
			}
		},
		
		methods: {
			initVideoAd(){
				let that = this
				this.videoAd = uni.createRewardedVideoAd({
					adUnitId:this.config.withdrawAdUnitId
				})
				this.videoAd.onLoad(() => {})
				this.videoAd.onError((err) => {})
				this.videoAd.onClose((res) => {
					that.videoAd.offClose()   //加在这里，而不是if后面
					if (res && res.isEnded) {
						// 写入你想奖励的内容
						that.watchedAdToWithdraw()
					}else {
						uni.showToast({
							title:'取消播放广告，加速失败',
							icon:'none'
						})
				  	}
				}); 
			},
			
			clickAll(){
				this.money = this.amount
			},
			
			confirmWithdraw(){
				if (!this.money || this.money <= 0){
					uni.showToast({
						title:"请输入正确的提现金额",
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:"/user/applyWithdrawal",
					method:"POST",
					data:{
						amount : that.money,
						type: this.config.withdrawType
					},
					success(data){
						if (data.code == 200){
							that.money = ""
							
							that.loadUserDetail()
							that.page = 1
							that.loadLogList()
							
							//去掉提现成功页面
							// uni.navigateTo({
							// 	url:'./withdrawDone'
							// })
							
						}
						if (data.msg){
							setTimeout(()=>{
								uni.showToast({
									title:data.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					failed(e){
					}
				})
				
			},
			
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/withdrawalCenter",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.amount = data.data.balanceAmount
							that.maxWithdrawAmount = data.data.maxWithdrawalAmount
							that.minWithdrawAmount = data.data.minWithdrawalAmount
							that.maxWithdrawCount = data.data.maxWithdrawalCount
						}
					},
					failed(e){
					}
				})
			},
			
			loadLogList(){
				let that = this
				this.http({
					url:'/user/userWithdrawalList',
					method:'POST',
					data:{
						pageNo : that.page,
						pageSize : 10,
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.recordList = res.data
							} else{
								that.recordList = [...that.recordList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			handlePlayAd(item){
				// 用户触发广告后，显示激励视频广告
				if (this.videoAd){
					this.adWithdrawId = item.id
					
					this.videoAd.show().catch(()=>{
						this.videoAd.load()
						.then(()=> this.videoAd.show())
						.catch(err =>{
							console.log('激励视频 广告显示失败')
						})
					})
				}
			},
			
			//看完广告后调用接口完成提现
			watchedAdToWithdraw(){
				if (!this.adWithdrawId) return
				let that = this
				this.http({
					url:'/user/withdrawalNotify',
					method:'POST',
					data:{
						id : that.adWithdrawId,
					},
					success(res){
						if (res.code == 200){
							that.adWithdrawId = ""
							that.page = 1
							that.loadLogList()
							that.loadUserDetail()
						}
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
					}
				})
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.top-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 120rpx);
		margin: 20rpx 30rpx;
		padding: 40rpx 30rpx 30rpx 30rpx;
		background: white;
		border-radius: 16rpx;
		
		.account-ic{
			width: 42rpx;
			height: 42rpx;
			margin-right: 14rpx;
		}
		
		.row-divider{
			width: 100%;
			height: 1rpx;
			background: #EFEFEF;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
		}
		
		.rule-container{
			display: flex;
			flex-direction: column;
			width: calc(100% - 48rpx);
			padding: 24rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}
		
		.confirm-btn{
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			background: #FFD100;
			border-radius: 10rpx;
		}
	}
	
	.record-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 120rpx);
		margin: 0rpx 30rpx 30rpx 30rpx;
		padding: 30rpx;
		background: white;
		border-radius: 16rpx;
		
		.record-item{
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 100rpx;
			position: relative;
			align-items: center;
			justify-content: space-between;
			
			.record-divider{
				width: 100%;
				height: 1rpx;
				background: #EDEDED;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			
			.play-ad{
				background: #FFD100;
				border-radius: 10rpx;
				padding: 7rpx 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}
		}
	}
	
</style>
